<template>
	<view class="battle-cal-item">
		<view class="last-record" v-for="(item, index) in lists" :key="index">
			<view class="top">
				<view class="" style="display: flex;align-items: center;">
					<text>NO.{{ item.game_id }}</text>
					<text style="margin-left: 20rpx;">{{ item.create_time }}</text>
				</view>
				<view v-if="item.killer_room==0" style="color: #dca775;">正在进行中</view>
				<view v-if="item.killer_room!=0&&item.state == 1" style="color: #316fa8;">躲避成功</view>
				<view v-if="item.killer_room!=0&&item.state != 1" style="color: red;">失败</view>
				
			</view>
			<view class="in-box">
				<view class="b-item">
					<text class="left">我选房间</text>
					<!-- <text class="right">{{$game.getRoomName(item.room_id)}}</text> -->
					<!-- <image class="label-image" :src="`../../static/game/brand/room_name_${item.room_id}_${$store.lang}.png`"
						mode="widthFix"></image> -->

					<image v-if="item.room_id == 1" class="label-image" src="../../static/game/brand/room_name_1_zh.png"
						mode="widthFix">
					</image>
					<image v-if="item.room_id == 2" class="label-image" src="../../static/game/brand/room_name_2_zh.png"
						mode="widthFix">
					</image>
					<image v-if="item.room_id == 3" class="label-image" src="../../static/game/brand/room_name_3_zh.png"
						mode="widthFix">
					</image>
					<image v-if="item.room_id == 4" class="label-image" src="../../static/game/brand/room_name_4_zh.png"
						mode="widthFix">
					</image>
					<image v-if="item.room_id == 5" class="label-image" src="../../static/game/brand/room_name_5_zh.png"
						mode="widthFix">
					</image>
					<image v-if="item.room_id == 6" class="label-image" src="../../static/game/brand/room_name_6_zh.png"
						mode="widthFix">
					</image>
					<image v-if="item.room_id == 7" class="label-image" src="../../static/game/brand/room_name_7_zh.png"
						mode="widthFix">
					</image>
					<image v-if="item.room_id == 8" class="label-image" src="../../static/game/brand/room_name_8_zh.png"
						mode="widthFix">
					</image>
				</view>
				<view class="b-item">
					<text class="left">杀手去了</text>
					<!-- <text class="right">{{$game.getRoomName(item.killer_room)}}</text> -->
					<!-- <image class="label-image"
						:src="`../../static/game/brand/room_name_${item.killer_room}_${$store.lang}.png`" mode="widthFix">
					</image> -->
					<image v-if="item.killer_room == 1" class="label-image" src="../../static/game/brand/room_name_1_zh.png"
						mode="widthFix">
					</image>
					<image v-if="item.killer_room == 2" class="label-image" src="../../static/game/brand/room_name_2_zh.png"
						mode="widthFix">
					</image>
					<image v-if="item.killer_room == 3" class="label-image" src="../../static/game/brand/room_name_3_zh.png"
						mode="widthFix">
					</image>
					<image v-if="item.killer_room == 4" class="label-image" src="../../static/game/brand/room_name_4_zh.png"
						mode="widthFix">
					</image>
					<image v-if="item.killer_room == 5" class="label-image" src="../../static/game/brand/room_name_5_zh.png"
						mode="widthFix">
					</image>
					<image v-if="item.killer_room == 6" class="label-image" src="../../static/game/brand/room_name_6_zh.png"
						mode="widthFix">
					</image>
					<image v-if="item.killer_room == 7" class="label-image" src="../../static/game/brand/room_name_7_zh.png"
						mode="widthFix">
					</image>
					<image v-if="item.killer_room == 8" class="label-image" src="../../static/game/brand/room_name_8_zh.png"
						mode="widthFix">
					</image>
				</view>
				<view class="b-item">
					<text class="left">投入</text>
					<text class="right">{{ item.amount }}</text>
				</view>
				<view class="b-item">
					<text class="left">获得</text>
					<text class="right">{{ item.bonus }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: "battle-record",
	props: {
		lists: {
			type: Array,
			default: () => []
		}
	},
	data() {
		return {

		};
	}
}
</script>

<style lang="scss" scoped>
.battle-cal-item {
	position: relative;
	width: 100%;
	// height: 300rpx;


	.last-record {
		padding: 30rpx;
		box-sizing: border-box;
		background-color: #0000008c;
		border: 2rpx solid #000;
		border-radius: 30rpx;
		box-sizing: border-box;
		margin-bottom: 40rpx;


		.top {
			width: 100%;
			border-bottom: 1px solid #999;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 24rpx;
			color: #fff;
			padding: 0 10rpx 10rpx;
			box-sizing: border-box;
		}

		.in-box {
			display: flex;
			flex-wrap: wrap;
			margin-top: 20rpx;

			.b-item {
				color: #fff;
				font-size: 24rpx;
				width: 50%;
				height: 60rpx;
				display: flex;
				align-items: center;
				// justify-content: center;

				.left {
					width: 140rpx;
				}

				.right {
					flex: 1;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.label-image {
					width: 80rpx;
				}
			}
		}

	}

}
</style>